<template>
    <el-dialog :title="modal4addOrEdit + modal4directoryOrFile"
               :visible.sync="dialogFormVisible"
               :before-close="onClose"
               destroy-on-close
               :file="file"
               :files="files"
    >
      <el-form :model="titleForm" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item :label="modal4directoryOrFile + '标题'" prop="title">
          <el-input v-model="titleForm.title"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
import rename from "@/views/home/api/rename";
import mkdir from "@/views/home/api/mkdir";

export default {
  name: "TitleModal",
  props: {
    dialogFormVisible: Boolean,
    title: String,
    file: Object,
    files: Array,
    pid: Number
  },
  data() {
    return {
      titleForm: {
        title: '',
        pid: 0
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { max: 50, message: '长度不能超过50', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onClose() {
      this.resetForm();
      this.$emit('onClose');
    },
    onSubmit() {
      this.$refs['formRef'].validate((valid, object) => {
        if (!valid) {
          this.$message.warning(object[0].message)
          return false;
        }
        this.commitForm();
        return true;
      });
    },
    commitForm() {
      if (this.file.id) {
        if (this.files.filter(file => file.id !== this.file.id
            && file.directoryFlag === this.file.directoryFlag
            && file.title === this.titleForm.title).length > 0) {
          this.$message.warning(this.modal4directoryOrFile + "标题已被使用")
          return;
        }
        this.rename();
      } else {
        if (this.files.filter(file => file.directoryFlag
            && file.title === this.titleForm.title).length > 0) {
          this.$message.warning("目录已存在")
          return;
        }
        this.mkdir();
      }
    },
    resetForm() {
      this.$refs['formRef'].resetFields();
    },
    async rename() {
      let response = await rename(this.file.id, this.titleForm.title);
      if (response.success) {
        this.onClose();
        this.emitSuccess();
      }
    },
    async mkdir() {
      console.log(this.titleForm);
      let response = await mkdir(this.titleForm);
      if (response.success) {
        this.onClose();
        this.emitSuccess();
      }
    },
    emitSuccess() {
      this.$emit("onSuccess");
    }
  },
  computed: {
    modal4addOrEdit() {
      if (!this.file.id) {
        return  '新增';
      }
      return  '编辑';
    },
    modal4directoryOrFile() {
      if (!this.file.id) {
        return '目录';
      }
      if (this.file.directoryFlag) {
        return '目录';
      }
      return '文件';
    }
  },
  mounted() {
    if (this.file.title) {
      this.titleForm.title = this.file.title;
    }
    this.titleForm.pid = this.pid;
  }
}
</script>

<style scoped>

</style>